import { useState, useEffect } from 'react';
import IScroll from 'iscroll';
import style from './picker.module.css';

function App() {
  const [pickerShow, setPickerShow] = useState(false);
  const [activeValue, setActiveValue] = useState('0');
  const [bottomStyle, setbottomStyle] = useState({ bottom: '-310px' });
  const [coverViewStyle, setcoverViewStyle] = useState({ zIndex: '-1', height: '0' });

  const firstUL = [
    {
      label: '浙江省',
      value: '0'
    },
    {
      label: '河南省',
      value: '1'
    },
    {
      label: '黑龙江省',
      value: '2'
    },
    {
      label: '浙江省1',
      value: '3'
    },
    {
      label: '河南省1',
      value: '4'
    },
    {
      label: '黑龙江省1',
      value: '5'
    },
    {
      label: '浙江省2',
      value: '6'
    },
    {
      label: '河南省2',
      value: '7'
    },
    {
      label: '黑龙江省2',
      value: '8'
    }
  ];
  const secondUL = [
    {
      label: '宁波市',
      value: '0-1'
    },
    {
      label: '杭州市',
      value: '0-2'
    },
    {
      label: '慈溪市',
      value: '0-3'
    }
  ];
  const [data, setData] = useState([
    {
      label: '浙江省',
      value: '0',
      childArr: [
        {
          label: '宁波市',
          value: '0-1',
          childArr: [
            {
              label: '鄞州区',
              value: '0-1-1'
            },
            {
              label: '南部商务区',
              value: '0-1-2'
            }
          ]
        },
        {
          label: '杭州市',
          value: '0-2'
        }
      ]
    }
  ]);
  useEffect(() => {
    let wrapper = document.getElementById('wrapper0');
    let myScroll = new IScroll(wrapper, {
      scrollX: false,
      scrollY: true,
      momentum: false,
      snap: 'li'
    });
    document.addEventListener(
      'touchmove',
      function (e) {
        e.preventDefault();
        console.log(e);
      },
      {
        capture: false,
        passive: false
      }
    );
    myScroll.on('scrollEnd', (e) => {
      let nowIndex = Math.round(Math.abs(myScroll.y) / 62);
      setActiveValue(nowIndex);
      console.log(myScroll, nowIndex, 'end');
    });
  }, []);

  useEffect(() => {
    let wrapper = document.getElementById('wrapper1');
    let myScroll = new IScroll(wrapper, {
      scrollX: false,
      scrollY: true,
      momentum: false,
      snap: 'li'
    });
  }, []);

  const changeShow = () => {
    setPickerShow(!pickerShow);
    if (pickerShow) {
      setcoverViewStyle({ zIndex: '-1', height: '0' });
      setbottomStyle({ bottom: '-310px' });
    } else {
      setcoverViewStyle({ zIndex: '1996', height: '100%' });
      setbottomStyle({ bottom: '0px' });
    }
  };
  const changeCover = () => {
    setcoverViewStyle({ zIndex: '-1', height: '0' });
    changeShow();
  };
  return (
    <div className="App">
      <button onClick={changeShow}>open or close</button>
      {/*遮罩层*/}
      <div className={`${[style.coverView]}`} onClick={changeCover} style={coverViewStyle}>
        {/*底部picker*/}
        <div className={`${[style.PickerView].join(' ')}`} style={bottomStyle}>
          {/*顶部功能区*/}
          <div className={`${[style.TopView].join(' ')}`}>
            <div className={`${[style.cancelBtn, style.toolBtn].join(' ')}`}>取消</div>
            <div>请选择</div>
            <div className={`${[style.confirmBtn, style.toolBtn].join(' ')}`}>确定</div>
          </div>
          <div className={`${[style.flex, style.iScrollView].join(' ')}`}>
            {/*滚动区view*/}
            <div id="wrapper0">
              <div className={`${[style.iScrollUl].join(' ')}`}>
                <ul>
                  {firstUL.map((item, index) => {
                    return (
                      <li className={`${[activeValue == item.value ? style.activeLiStyle : '']}`} key={item.value}>
                        {item.label}
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
            {/**/}
            <div id="wrapper1">
              <div className={`${[style.iScrollUl].join(' ')}`}>
                <ul>
                  {firstUL.map((item, index) => {
                    return (
                      <li className={`${[activeValue == item.value ? style.activeLiStyle : '']}`} key={item.value}>
                        {item.label}
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
